<template>
	
	<!-- 开启长按复制文本功能 -->
	<text v-if="select=='true'||select==true"
	:class="classText" :style="styleText"
	:decode="true"
	:selectable="true" :user-select="true"
	>{{text}}</text>
	
	<!-- 默认情况：屏蔽了文本复制 -->
	<text v-else
	:class="classText" :style="styleText"
	:decode="true"
	>{{text}}</text>
	
</template>


<script>
	/**
	 * 文本内容
	 * @description vue/nvue通用，基础类组件，文本容器，用于包裹文本内容
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-text
	 * @property {String} text 文本内容
	 * @property {String} mode = [title|content|remark|placeholder] 使用内置文字类型。注：使用后，size(字体大小)、lineheight(行高)、color(颜色)的设置将失效
	 *   @value title 一级文字/标题
	 *   @value content 二级文字/内容
	 *   @value remark 三级文字/备注说明
	 *   @value placeholder 四级文字/占位文字
	 * @property {String,Number} size 字体大小(rpx)，默认：30
	 * @property {String,Number} lineheight = [1.0|1.2|1.4|1.5|1.8|2.0] 每行文字高度，默认：1.5
	 * @property {String,Number} lines = [1|2|3|4|5] 行数限制，超出用“...”代替
	 * @property {String} weight = [normal|bold] 文字加粗，默认：normal
	 *   @value normal 正常，等同于400
	 *   @value bold 加粗，等同于700
	 * @property {String} align = [left|center|right] 文字对齐方式，默认：left
	 *   @value left 左对齐
	 *   @value center 居中对齐
	 *   @value right 右对齐
	 * @property {String} decoration = [none|underline|through] 字体装饰，默认：none
	 *   @value none 无效果
	 *   @value underline 底部下划线
	 *   @value through 线条从文字中间穿过
	 * @property {String} color = [title|content|remark|placeholder|black|white|primary|success|warning|error|info] 内置的字体颜色，默认：content；也可以直接填入十六进制RGB值，如：#FFFFFF
	 *   @value title 一级文字/标题颜色
	 *   @value content 二级文字/内容颜色
	 *   @value remark 三级文字/备注说明颜色
	 *   @value placeholder 四级文字/占位文字颜色
	 *   @value black 黑色
	 *   @value white 白色
	 *   @value primary 基本主体颜色
	 *   @value success 完成颜色
	 *   @value warning 警告颜色
	 *   @value error 错误颜色
	 *   @value info 信息颜色
	 * @property {String} colorscheme = [light|dark|disabled] 文字颜色系别，仅支持内置color值域中的“主题色”，不填则使用常规
	 *   @value light 浅色系
	 *   @value dark 暗色系
	 *   @value disabled 禁用系
	 * @property {String,Boolean} newline = [false|true] 是否允许文字换行，默认：true
	 *   @value false 不允许文字换行，将会强制在一行显示，请不要与lines[行数限制]同时使用
	 *   @value true 允许文字换行(默认)
	 * @property {String,Boolean} select = [false|true] 是否可以选中文本内容，默认：false
	 *   @value false 关闭长按复制文本
	 *   @value true 开启长按复制文本
	 * @property {Object} styles 组件自定义样式，必须使用object格式
	 */
	export default {
		name: "focus-text",
		// 传递数据
		props: {
			"tag": { type: String, default: 'focus-text' },
			"text": { type: String, default: '' },
			"mode": { type: String, default: '' },
			"size": { type: [String,Number], default: 30 },
			"lineheight": { type: [String,Number], default: 1.5 },
			"lines": { type: [String,Number], default: null },
			"weight": { type: String, default: 'normal' },
			"align": { type: String, default: 'left' },
			"decoration": { type: String, default: 'none' },
			"color": { type: String, default: 'content' },
			"colorscheme": { type: String, default: '' },
			"newline": { type: [String,Boolean], default: true },
			"select": { type: [String,Boolean], default: false },
			"styles": { type: Object, default: function() { return {}; } }
		},
		
		// 计算属性
		computed: {
			// 容器class属性
			classText() {
				// 初始化
				var arr_class = [];
				var str_class = '';
				
				// 内置文字类型
				if (this.mode.length)
				{
					// 文字类型 名称组合
					arr_class.push('_focus-text-mode-' + this.mode);
				}
				
				// 内置文字颜色
				else if (this.color.length>0 && this.color.indexOf('#')<0)
				{
					// 背景颜色 名称组合
					var className_color = '_focus-fontColor-' + this.color;
					// 是否传递背景色系
					if (this.colorscheme.length > 0) { className_color += '-' + this.colorscheme; }
					// 类名添加
					arr_class.push(className_color);
				}
				
				// 行数量限制
				if (this.lines != null && Number(this.lines) >= 1)
				{
					// 名称组合
					arr_class.push('_focus-text-lines-' + this.lines);
				}
				
				// 不允许文字换行
				if (this.newline == false || this.newline == 'false') {
					arr_class.push('_focus-text-newline-not-class');
				}
				// 允许文字换行
				else { arr_class.push('_focus-text-newline-allow-class'); }
				
				// 循环样式对象
				for (let k in arr_class) { str_class += arr_class[k] + ' '; }
				// 结果返回
				return str_class;
			},
			// 容器style属性
			styleText() {
				// 初始化
				var obj_style = {};
				var str_style = '';
				
				// ======================================= 字体大小
				if (this.size != null && Number(this.size) >= 0 && !this.mode) { obj_style['font-size'] = this.size + 'rpx'; }
				
				// ======================================= 行高
				if (this.lineheight != null && Number(this.lineheight) >= 0 && !this.mode) {
					obj_style['line-height'] = Math.round(Number(this.size) * Number(this.lineheight)) + 'rpx';
				}
				
				// ======================================= 是否加粗
				if (this.weight == 'bold') { obj_style['font-weight'] = 'bold'; }
				
				// ======================================= 文字对齐方式
				if (this.align == 'center') { obj_style['text-align'] = 'center'; }
				else if (this.align == 'right') { obj_style['text-align'] = 'right'; }
				else { obj_style['text-align'] = 'left'; }
				
				// ======================================= 字体装饰
				if (this.decoration == 'underline') { obj_style['text-decoration'] = 'underline'; }
				else if (this.decoration == 'through') { obj_style['text-decoration'] = 'line-through'; }
				
				// ======================================= 文字颜色(16进制)
				if (this.color && this.color.indexOf('#')>=0 && !this.mode)
				{
					obj_style['color'] = this.color;
				}
				
				
				// ======================================= 用户自定义
				if (typeof(this.styles)=="object") { obj_style = Object.assign(obj_style, this.styles); }
				
				// 循环样式对象
				for (let k in obj_style) { str_style += k + ':' + obj_style[k] + ';'; }
				// 结果返回
				return str_style;
			}
		},
		
	}
</script>


<style lang="scss">
	// 文字颜色文件
	@import "../../lib/css/style-font.scss";
	
	/* 内置文字类型 */
	._focus-text-mode-title{ font-size: 40rpx; line-height: 60rpx; color: $focus-color-title; }
	._focus-text-mode-content{ font-size: 30rpx; line-height: 45rpx; color: $focus-color-content; }
	._focus-text-mode-remark{ font-size: 27rpx; line-height: 40rpx; color: $focus-color-remark; }
	._focus-text-mode-placeholder{ font-size: 24rpx; line-height: 36rpx; color: $focus-color-placeholder; }
	
	/* 文字换行逻辑 - 文字允许换行 */
	._focus-text-newline-allow-class{
		/* #ifndef APP-NVUE */
			word-break: break-all;
		/* #endif */
		/* #ifdef APP-NVUE */
			word-wrap: anywhere;
		/* #endif */
	}
	/* 文字换行逻辑 - 文字不允许换行 */
	._focus-text-newline-not-class{
		/* #ifndef APP-NVUE */
			white-space: nowrap;
		/* #endif */
		/* #ifdef APP-NVUE */
			word-wrap: normal; lines: 1;
		/* #endif */
	}
	
	/* 文字显示行数，超出部分会是"..." */
	._focus-text-lines-1{
		/* #ifdef APP-NVUE */
		lines: 1; text-overflow: ellipsis;
		/* #endif */
		/* #ifndef APP-NVUE */
		overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
		/* #endif */
	}
	._focus-text-lines-2{
		/* #ifdef APP-NVUE */
		lines: 2; text-overflow: ellipsis;
		/* #endif */
		/* #ifndef APP-NVUE */
		overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
		/* #endif */
	}
	._focus-text-lines-3{
		/* #ifdef APP-NVUE */
		lines: 3; text-overflow: ellipsis;
		/* #endif */
		/* #ifndef APP-NVUE */
		overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
		/* #endif */
	}
	._focus-text-lines-4{
		/* #ifdef APP-NVUE */
		lines: 4; text-overflow: ellipsis;
		/* #endif */
		/* #ifndef APP-NVUE */
		overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
		/* #endif */
	}
	._focus-text-lines-5{
		/* #ifdef APP-NVUE */
		lines: 5; text-overflow: ellipsis;
		/* #endif */
		/* #ifndef APP-NVUE */
		overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
		/* #endif */
	}
	
</style>